<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { PAGING } from '@/constant'
import { formatTime } from '@/utils'
// ------------------use------------------
// #region
const { $confirm, $message } = useCurrentInstance()
const { vLoading, withLoading } = useDefineLoading()
const [tableData, setTableData] = useState<any[]>([])
const [tableSelect, setTableSelect] = useState<any[]>([])
const [isAddDrawer, setIsAddDrawer]
  = useState<boolean>(false)
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region

async function getTableData() {
  await withLoading(sleep)(1000)
  setTableData(Array.from({ length: 24 }).fill({}))
}
async function deleteData() {
  try {
    console.log(tableSelect)
    if (tableSelect.value.length === 0) {
      $message.warning('没有选择要删除的数据！')
      return
    }

    await $confirm(
      '该操作将永久删除所选数据，确定删除？',
      '警告',
      {
        type: 'warning',
      },
    )
    getTableData()
  }
  catch (error) {}
}
function showAddDrawer() {
  setIsAddDrawer(true)
}
function reset() {
  getTableData()
}
function search() {
  getTableData()
}
// #endregion
</script>

<template>
  <div
    class="flex-direction padding-sm overflow box-border flex align-end container"
  >
    <el-form
      inline
      label-width="70px"
      label-position="left"
      class="flex-incompressible width-fill"
    >
      <el-form-item label="能源品种">
        <el-select clearable placeholder="全部">
          <el-option label="其他原煤" value="1" />
          <el-option label="天然气(气态)" value="2" />
          <el-option label="电力" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="计量位置">
        <el-select>
          <el-option disabled label="全部" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="定期提醒">
        <el-select clearable placeholder="全部">
          <el-option label="近一周" value="1" />
          <el-option label="近一个月" value="2" />
          <el-option label="近三个月" value="3" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button plain @click="reset">
          重置
        </el-button>
        <el-button type="primary" @click="search">
          查询
        </el-button>
        <el-button
          type="primary"
          @click="showAddDrawer"
        >
          新增
        </el-button>
        <el-button type="danger" @click="deleteData">
          删除选中
        </el-button>

        <el-dropdown>
          <el-button
            type="primary"
            class="margin-left-xs"
          >
            导出
            <el-icon class="el-icon--right">
              <ArrowDown />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                导出当前页
              </el-dropdown-item>
              <el-dropdown-item>导出选中</el-dropdown-item>
              <el-dropdown-item>导出全部</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-form-item>
    </el-form>
    <el-table
      v-loading
      :data="tableData"
      class="flex-fillRemaining width-fill"
      @selection-change="setTableSelect"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        fixed
        type="index"
        label="序号"
        width="80"
      />
      <el-table-column label="计量器具名称" width="240">
        <el-button type="primary" link>
          {{ formatTime(Date.now(), 'YYYY-MM') }}
        </el-button>
      </el-table-column>
      <el-table-column label="运行状态">
        {{ 24 || '---' }}
      </el-table-column>
      <el-table-column label="计量器具编号">
        {{ 24 || '---' }}
      </el-table-column>
      <el-table-column label="能源品种">
        {{
          formatTime(Date.now(), 'YYYY-MM-DD hh:mm:ss')
            || '---'
        }}
      </el-table-column>
      <el-table-column label="计量等级">
        {{
          formatTime(Date.now(), 'YYYY-MM-DD hh:mm:ss')
            || '---'
        }}
      </el-table-column>
      <el-table-column label="型号规格" />
      <el-table-column label="生产厂家">
        {{ 0 ?? '---' }}
      </el-table-column>
      <el-table-column label="计量位置">
        {{ 24 || '---' }}
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <el-tooltip content="明细" placement="top">
          ----
        </el-tooltip>
        <el-divider direction="vertical" />
        <el-tooltip content="上报" placement="top">
          ----
        </el-tooltip>
      </el-table-column>
    </el-table>

    <el-pagination

      :page-sizes="PAGING.PAGE_SIZES"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100"
      background hide-on-single-page
      class="flex-incompressible margin-top-xs"
    />

    <!-- 新增 -->
    <el-drawer
      v-model="isAddDrawer"
      :size="800"
      title="新增计量器具"
    >
      <b-scrollbar>
        <el-form
          inline
          label-width="100px"
          label-position="right"
          class="width-fill flex flex-wrap justify-between"
        >
          <el-form-item label="计量器具名称">
            <el-input
              clearable
              placeholder="名称"
            />
          </el-form-item>
          <el-form-item label="计量器具编号">
            <el-input
              clearable
              placeholder="编号"
            />
          </el-form-item>
          <el-form-item label="计量等级">
            <el-select>
              <el-option disabled label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="计量器具类型">
            <el-select>
              <el-option disabled label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="计量位置">
            <el-select>
              <el-option disabled label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="计量品种">
            <el-select>
              <el-option disabled label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="鉴定结果">
            <el-select>
              <el-option disabled label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="运行状态">
            <el-select>
              <el-option disabled label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="所属上报数据组合编码"
            label-width="180"
            class="width-fill"
          >
            <el-input
              clearable
              placeholder="全部"
              class="width-fill"
            />
          </el-form-item>
          <el-form-item label="算术关系">
            <el-select>
              <el-option disabled label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="算术系数">
            <el-select>
              <el-option disabled label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="互感倍率">
            <el-input
              clearable
              placeholder="全部"
            />
          </el-form-item>
          <el-form-item label="对应测点">
            <el-input
              clearable
              placeholder="全部"
            />
          </el-form-item>
          <el-form-item label="型号规格">
            <el-input
              clearable
              placeholder="全部"
            />
          </el-form-item>
          <el-form-item label="生产厂家">
            <el-input
              clearable
              placeholder="全部"
            />
          </el-form-item>
          <el-form-item label="精度等级">
            <el-input
              clearable
              placeholder="全部"
            />
          </el-form-item>
          <el-form-item label="测量范围">
            <el-input
              clearable
              placeholder="全部"
            />
          </el-form-item>
          <el-form-item label="上次鉴定时间">
            <el-date-picker
              type="date"
              placeholder="请选择日期"
            />
          </el-form-item>
          <el-form-item label="下次鉴定时间">
            <el-date-picker
              type="date"
              placeholder="请选择日期"
            />
          </el-form-item>
          <el-form-item label="鉴定周期">
            <el-input
              clearable
              placeholder="全部"
            />
          </el-form-item>
          <el-form-item label="鉴定机构">
            <el-input
              clearable
              placeholder="全部"
            />
          </el-form-item>
          <el-form-item label="未鉴定原因">
            <el-input
              clearable
              placeholder="全部"
            />
          </el-form-item>
          <el-form-item label="安装位置">
            <el-input
              clearable
              placeholder="全部"
            />
          </el-form-item>
          <el-form-item label="安装厂家">
            <el-select>
              <el-option disabled label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="接入系统">
            <el-select>
              <el-option disabled label="全部" value="" />
            </el-select>
          </el-form-item>
          <el-form-item label="安装时间">
            <el-date-picker
              type="date"
              placeholder="请选择日期"
            />
          </el-form-item>
          <el-form-item label="状态发生时间">
            <el-date-picker
              type="date"
              placeholder="请选择日期"
            />
          </el-form-item>
        </el-form>
      </b-scrollbar>
      <template #footer>
        <el-button plain @click="setIsAddDrawer(false)">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="setIsAddDrawer(false)"
        >
          保存
        </el-button>
      </template>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
